<template>
  <view class="content">
    <view class="top marg-btm10">
      <text>正在养肥中</text>
      <text class="green">{{ topTotal }}只</text>
      <button class="greenBtn wid100" @click="onWashBatch" type="default" size="mini">一键全洗</button>
    </view>
    <uni-list>
      <uni-list-item>
        <!-- 自定义 body -->
        <template v-slot:body>
          <view class="list">
            <view class="wid_x">序号</view>
            <view class="flex1">领养日期</view>
            <view class="wid">上次洗澡日</view>
            <view class="wid3">已洗次数</view>
            <view class="wid1">操作</view>
          </view>
        </template>
      </uni-list-item>
      <template v-if="list && list.length > 0">
        <uni-list-item v-for="item in list" :key="item.id">
          <!-- 自定义 body -->
          <template v-slot:body>
            <view class="list">
              <view class="wid_x">{{ item.id }}</view>
              <view class="flex1">{{ item.claim_time }}</view>
              <view class="wid">{{ item.wash_time }}</view>
              <view class="wid3">{{ item.wash_num }}</view>
              <view class="wid1">
                <button v-if="1 == item.wash_state" @click="onSubmit(item)" type="default" size="mini">去洗澡</button>
                <view v-else> 今日已洗</view>
              </view>
            </view>
          </template>
        </uni-list-item>
      </template>
      <uni-list-item v-else>
        <!-- 自定义 body -->
        <template v-slot:body>
          <view style="margin: 0 auto"><statusTips></statusTips></view>
        </template>
      </uni-list-item>
    </uni-list>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getFattenGoods, washOne, washBatch } from '@/api/bgame';
import statusTips from '@/components/statusTips/statusTips.vue';
import { useUserStoreHook } from '@/store/user';
const topTotal = ref('0');
const list = ref([]);
onLoad(async(option) => {
  await useUserStoreHook().getSign();
  setInit();
});
const setInit = async () => {
  uni.showLoading({
    title: '获取信息中...',
    mask: true,
  });
  const res: any = await getFattenGoods({});
  uni.hideLoading();
  if (1 == res.result) {
    topTotal.value = res.data.num || 0;
    list.value = res.data.list || [];
  }
};

const onSubmit = async (item: any) => {
  uni.showLoading({
    title: '清洗中...',
    mask: true,
  });
  const res = await washOne({ id: item.id });

  uni.hideLoading();
  if (1 == res.result) {
    uni.showToast({
      title: '清洗成功',
      icon: 'none',
    });
    setInit();
  } else {
    uni.showToast({
      title: res.msg.msg || '清洗失败',
      mask: true,
      icon: 'error',
    });
  }
};

const onWashBatch = async () => {
  uni.showLoading({
    title: '清洗中...',
    mask: true,
  });
  const res = await washBatch({});

  uni.hideLoading();
  if (1 == res.result) {
    uni.showToast({
      title: '清洗成功',
      icon: 'none',
    });
    setInit();
  } else {
    uni.showToast({
      title: res.msg.msg || '清洗失败',
      mask: true,
      icon: 'error',
    });
  }
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: calc(100vh - 44px);
  padding: 8rpx;

  .top {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;

    .green {
      color: green;
    }

    text {
      padding: 6rpx;
    }
  }
  
}

.list {
  width: 100%;
  display: flex;
  font-size: 0.8rem;

  .flex1 {
    flex: 1;
    width: 0;
  }

  .wid {
    width: 80px;
    text-align: center;

    button {
      padding: 0 6rpx;
      color: green;
      border: green 1px solid;
    }
  }
  .wid_x {
    width: 40px;
  }
  .wid3 {
    width: 60px;
  }
  .wid1 {
    width: 65px;
    text-align: center;

    button {
      padding: 0 6rpx;
      color: green;
      border: green 1px solid;
    }
  }
}
.greenBtn {
  padding: 0 6rpx;
  color: green;
  border: green 1px solid;
}
.wid100 {
  width: 100px;
}
.marg-btm10 {
  margin-bottom: 10px;
}
</style>
